<template>
  <div
    class="h-full bg-zinc-200 dark:bg-zinc-800 duration-500 overflow-auto xl:pt-1"
  >
    <div
      class="relative max-w-screen-xl mx-auto bg-white dark:bg-zinc-900 duration-500 xl:rounded xl:border-zinc-200 xl:dark:border-zinc-600 xl:border xl:px-4 xl:py-2"
    >
      <!-- 移动端 -->
      <m-navbar
        sticky
        v-if="isMobileTerminal"
        :clickLeft="onNavbarLeftClick"
      ></m-navbar>
      <!-- PC端标题 -->
      <div v-else class="text-lg font-bold text-center mb-4 dark:text-zinc-300">
        个人资料
      </div>
      <div class="h-full w-full px-1 pb-4 text-sm mt-2 xl:w-2/3 xl:text-center">
        <div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
          <!-- 头像部分 -->
          <span
            class="w-8 inline-block mb-2 font-black text-sm dark:text-zinc-300 xl:block xl:mx-auto"
            >我的头像
          </span>
          <!--  头像-->
          <div
            class="relative w-[80px] h-[80px] group xl:cursor-pointer xl:left-1/2 xl:translate-x-[-50%]"
            @click="onAvatarClick"
          >
            <img
              :src="$store.getters.userInfo.avatar"
              class="rounded-full w-full h-full xl:inline-block"
            />
            <!-- 鼠标移入 -->
            <div
              class="absolute top-0 rounded-full w-full h-full bg-black/40 hidden xl:group-hover:block duration-300"
            >
              <m-svg-icon
                name="change-header-image"
                class="w-2 h-2 m-auto mt-2"
              ></m-svg-icon>
              <div
                class="text-xs text-white dark:text-zinc-300 scale-90 mt-0.5"
              >
                点击更换头像
              </div>
            </div>
          </div>
          <!-- 隐藏域 -->
          <input
            v-show="false"
            type="file"
            ref="inputFileTarget"
            accept=".png,.jpeg,.jpe,.gif"
            @change="onSelectImgHandler"
          />
          <p class="mt-1 text-zinc-500 dark:text-zinc-400 text-xs xl:w-10">
            支持 jpg、png、jpeg 格式大小 5M 以内的图片
          </p>
        </div>
        <!-- 用户名 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
            >用户名
          </span>
          <m-input
            class="w-full"
            max="20"
            v-model="userInfo.nickname"
          ></m-input>
        </div>
        <!-- 职位 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            职位
          </span>
          <m-input class="w-full" v-model="userInfo.title"></m-input>
        </div>
        <!-- 公司 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            公司
          </span>
          <m-input class="w-full" v-model="userInfo.company"></m-input>
        </div>
        <!-- 个人主页 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            个人主页
          </span>
          <m-input class="w-full" v-model="userInfo.homePage"></m-input>
        </div>
        <!-- 个人介绍 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">
            个人介绍
          </span>
          <m-input
            class="w-full"
            type="textarea"
            max="50"
            v-model="userInfo.introduction"
          ></m-input>
        </div>
        <!-- 保存修改 -->
        <m-button
          :loading="loading"
          @click="onChangeProfile"
          class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          >保存修改</m-button
        >
        <!-- 移动端：退出登录 -->
        <m-button
          v-if="isMobileTerminal"
          @click="onLogoutClick"
          class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          >退出登录</m-button
        >
      </div>
    </div>
    <!-- PC端 -->
    <m-dialog
      title="裁剪头像"
      v-model="isDialogVisible"
      v-if="!isMobileTerminal"
    >
      <changeAvatarVue
        :blob="currentBlob"
        @close="isDialogVisible = false"
      ></changeAvatarVue>
    </m-dialog>
    <!-- 移动端 -->
    <m-popup
      v-else
      v-model="isDialogVisible"
      :class="{
        'h-screen': isDialogVisible
      }"
    >
      <changeAvatarVue
        :blob="currentBlob"
        @close="isDialogVisible = false"
      ></changeAvatarVue>
    </m-popup>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { confirm } from '@/libs'
import { isMobileTerminal } from '@/utils/flexible.js'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { putProfile } from '@/api/sys.js'
import { message } from '@/libs'
import changeAvatarVue from './components/change-avatar.vue'
const store = useStore()
const router = useRouter()

/**
 * 移动端下navbar 左侧点击事件
 */
const onNavbarLeftClick = () => {
  // 移动端下跳转的类型
  store.commit('app/changeRouterType', 'back')
  router.back()
}

/**
 * 移动端退出登录
 */
const onLogoutClick = () => {
  confirm('确定要退出登录吗?').then(() => {
    store.dispatch('user/logout')
  })
}

/**
 * 控制dialog展示
 */
const isDialogVisible = ref(false)

// 选中的图片
const currentBlob = ref('')

/**
 * 选中头像
 */
const inputFileTarget = ref(null)
const onAvatarClick = () => {
  inputFileTarget.value.click()
}

/**
 * 选中文件之后的回调
 */
const onSelectImgHandler = () => {
  // 获取选中的文件
  const imgFile = inputFileTarget.value.files[0]
  // 生成blob对象
  const blob = URL.createObjectURL(imgFile)
  // 获取到类文件对象 blob
  currentBlob.value = blob
  // 展示dialog
  isDialogVisible.value = true
}

/**
 * 当两次选中同一个文件时，change的回调不会被再次触发
 * 想要解决这个问题，只需要在每次选择的图片不再被使用之后，清空掉inputTarget 的value
 */
watch(isDialogVisible, (val) => {
  if (!val) {
    inputFileTarget.value.value = null
  }
})

/**
 * 数据本地的双向同步
 */
// const changeStoreUserInfo = (key, value) => {
//   console.log('key', key)
//   console.log('value', value)
//   console.log({
//     ...store.getters.userInfo,
//     [key]: value
//   })
//   store.commit('user/setUserInfo', {
//     ...store.getters.userInfo,
//     [key]: value
//   })
// }

/**
 * 数据本地的双向同步
 */
const userInfo = ref(store.getters.userInfo)

/**
 * 修改个人信息
 */
const loading = ref(false)
const onChangeProfile = async () => {
  loading.value = true
  const res = await putProfile(userInfo.value)
  // 同步vuex
  store.commit('user/setUserInfo', userInfo.value)
  message('success', '用户信息修改成功')
  loading.value = false
}
</script>

<style lang="scss" scoped></style>
